<template>
      <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="60%"
      @close="handleClose"
      @open="getDetail"
      >
      <el-row class="elRow" style="padding-bottom:15px">
        <el-col :span="6"><div>【编号】 ：{{previewDetail.chkUserID}}</div></el-col>
        <el-col :span="6"><div>【难度】 ：{{previewDetail.difficulty|bn}}</div></el-col>
        <el-col :span="6"><div>【题型】 ：{{previewDetail.questionType|cn}}</div></el-col>
        <el-col :span="6"><div>【标签】 ：{{previewDetail.tags}}</div></el-col>
      </el-row>
      <el-row class="elRow">
        <el-col :span="6"><div>【学科】 ：{{previewDetail.subjectName}}</div></el-col>
        <el-col :span="6"><div>【目录】 ：{{previewDetail.directoryName}}</div></el-col>
        <el-col :span="6"><div>【方向】 ：{{previewDetail.direction}}</div></el-col>
      </el-row>
      <hr>

        【题干】 ：<div v-html="previewDetail.question" style="color:blue"></div>
        <div v-if="previewDetail.questionType!=='3'">
        <div style="padding-bottom:5px">{{previewDetail.questionType|tx}} 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in previewDetail.options" :key="item.code" style="padding:8px 0">
          <el-radio v-if="previewDetail.questionType==='1'" :value="item.isRight" :label="1">{{item.title}}</el-radio>
          <el-checkbox v-if="previewDetail.questionType==='2'" :value="item.isRight?true:false" >{{item.title}}</el-checkbox>
        </div>
        </div>
      <hr>
      <div>
        【参考答案】 ：
          <el-button type="danger" @click="preivewVideo()">视频答案预览</el-button>
          <div class="video" v-show="play">
            <video ref="video" :src="detailInfo.videoURL" controls></video>
          </div>

      </div>
      <hr>
      <div>
        【答案解析】 ：<div style="display:inline-block" v-html="detailInfo.answer"></div>
      </div>
      <hr>
      <div>
        <p>【题目备注】 ：{{detailInfo.remarks}}</p>
      </div>
      <hr>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { difficulty, questionType } from '@/api/hmmm/constants'

export default {
  data () {
    return {
      previewDetail: {},
      difficulty,
      questionType,
      play: false
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    },
    detailInfo: {
      type: Object,
      default: () => {}
    },
    test: {
      type: Number,
      require: true
    }
  },
  filters: {
    bn (val) {
      if (val) return difficulty.find(item => item.value === +val).label
    },
    cn (val) {
      if (val) return questionType.find(item => item.value === +val).label
    },
    tx (val) {
      if (val) return questionType.find(item => item.value === +val).label + '题'
    }
  },
  created () {
    // console.log(this.detailInfo)
    // console.log(this.test)
    // this.getDetail()
    console.log(this.detailInfo)
  },
  methods: {
    handleClose () {
      this.$emit('update:dialogVisible', false)
      // this.dialogVisible = false
    },
    async getDetail () {
      const { data } = await detail({ id: this.detailInfo.id })
      // console.log(res)
      this.previewDetail = data
      // console.log(this.previewDetail)
    },
    preivewVideo () {
      this.play = true
      this.$refs.video.play()
    }
  }
}
</script>

<style scoped lang='scss'>
.video{
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
